<template>
  <div class="test">
    <RenderTable 
      :superQueryFieldList="superQueryFieldList" 
      :queryParamArr = "queryParamArr"
      :defColumns="defColumns"
      :url = "url"
      @handleEdit = "handleEdit"
    >

    </RenderTable>

      <p-modal
        title="Title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <p-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <p-form-model-item label="Password" prop="pass">
            <p-input v-model="ruleForm.pass" autocomplete="off" />
          </p-form-model-item>

        </p-form-model>
      </p-modal>  

  </div>
</template>

<script type="text/javascript">
// import RenderTable from '@/src/components/renderTable/renderTable.vue'
// import RenderTable from '@/src/components/renderTable/renderTable.vue'
// import RenderTable from '../../components/renderTablue'


const superQueryFieldList =
[
  {
    value: "organization",
    text: "组织",
    type: "String",
  },  
  {
    value: "empname",
    text: "员工姓名",
    type: "String",
  },
]
export default {
  data() {
    return {
      superQueryFieldList,
      queryParamArr: [
        {
          label: "员工工号",
          placeholder: "请输入员工工号",
          type: 'input',
          key: 'empno',
          value: ''
        }
      ],
      defColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "组织",
          align: "center",
          dataIndex: "organization",
        },
        {
          title: "员工编号",
          align: "center",
          dataIndex: "empno",
        },
        {
          title: "员工姓名",
          align: "center",
          dataIndex: "empname",
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "empsex",
          // customRender: (t, r, index) => {
          //   return {1: '男', 0: '女'}[t]
          // }
        },
        {
          title: "出生年月",
          align: "center",
          dataIndex: "borndt",
        },
        {
          title: "在职状态",
          align: "center",
          dataIndex: "holdflg",
        },
        {
          title: "入职日期",
          align: "center",
          dataIndex: "registerdt",
        },
        {
          title: "离职日期",
          align: "center",
          dataIndex: "dimissidt",
        },
        {
          title: "雇佣性质",
          align: "center",
          dataIndex: "employNature",
        },
        {
          title: "学历",
          align: "center",
          dataIndex: "edulevel",
        },
        {
          title: "车间",
          align: "center",
          dataIndex: "workroomname",
        },
        {
          title: "线体",
          align: "center",
          dataIndex: "linename",
        },
        {
          title: "手机",
          align: "center",
          dataIndex: "mobilePhone",
        },
        {
          title: "岗位",
          align: "center",
          dataIndex: "duty",
        },
        {
          title: "直接/间接人",
          align: "center",
          dataIndex: "diPower",
        },
        {
          title: "Email",
          align: "center",
          dataIndex: "email",
        },
        {
          title: "班组",
          align: "center",
          dataIndex: "classname",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: '/mes-manpower/mesHrEmployeeinfo/list',
      },
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,      
      ruleForm: {
        pass: '',
        checkPass: '',
        age: '',
      },
      rules: {
        pass: [ { required: true, message: "标签模板编码", trigger: "blur" }],
        checkPass: [ { required: true, message: "标签模板编码", trigger: "blur" }],
        age: [ { required: true, message: "标签模板编码", trigger: "blur" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },         
    }
  },
  mounted() {

  },
  methods: {
    handleEdit(record){
      console.log(record);
      console.log(33);
      this.showModal()
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      // setTimeout(() => {
      //   this.visible = false;
      //   this.confirmLoading = false;
      // }, 2000);

      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },   
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },     
  },
  components: {
    RenderTable
  }
}
</script>

<style lang="less" scoped>
</style>
